<template>
  <!-- 新拆分组件，可以先把内容放在App中，再一点点抽离，剪切内容之后立即使用组件标签替换 -->
  <div>
    <div id="root">
      <div class="todo-container">
        <div class="todo-wrap">
          <!-- 头部输入框-->
          <!-- 父亲可以传输任何数据：字符串、函数、数组、对象，这里给头部子组件传递一个方法 -->
          <AddBehavior :addTodo="addTodo"></AddBehavior>

          <!-- 内容集合 -->
          <BehaviorList :todoList="todoList"></BehaviorList>

          <!-- 汇总内容 -->
          <Statistics></Statistics>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AddBehavior from "./components/AddBehavior.vue";
import BehaviorList from "./components/BehaviorList.vue";
import Statistics from "./components/Statistics.vue";

export default {
  name: "App",
  components: {
    AddBehavior,
    BehaviorList,
    Statistics,
  },
  //1：属性交由同一个父组件，实现兄弟组件中传递数据    list通过配置props获取，head通过emit传递
  data() {
    return {
      //数组中有多个对象
      todoList: [
        //number在js中是有尽头的，所以用字符串，会自动转
        { id: "001", title: "吃饭", done: true },
        { id: "002", title: "睡觉", done: true },
        { id: "003", title: "开车", done: false },
      ],
    };
  },
  //数组在哪，对数据的操作就应该在哪！！！
  methods: {
    //1：父组件中定义一个方法，由子类调用并传递数据
    addTodo(data) {
      //放入数组
      this.todoList.unshift(data);
    },
  },
};
</script>

<style>
/*base 基本样式，全局使用*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>